<template>
    <div class="com-container">
        <!-- 饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop, Emit } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'ContractBarChart',
})
export default class ContractBarChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: ['#3c7786', '#feb580'],
            grid: {
                top: '15%',
                left: '8%',
                right: '5%',
                bottom: '16%',
            },
            legend: {
                // right: '2%',
                icon: 'circle',
                bottom: '1%',
                selectedMode: false,
                data: ['新增合同', '补充协议'],
            },
            xAxis: {
                type: 'category',
                data: this.data.xData,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: '0',
                    // formatter: value => {
                    //     return moment(value, 'YYYYMMDD').format('YYYY年MM月');
                    // },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#9999b3',
                    },
                },
                splitLine: {
                    show: false,
                },
            },
            yAxis: {
                type: 'value',
                show: false,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: '#9999b3',
                    },
                },
                splitLine: {
                    show: false,
                },
            },
            series: [
                {
                    name: '新增合同',
                    type: 'bar',
                    data: this.data.data.products,
                    stack: 'Ad',
                    label: {
                        show: true,
                        color: '#fff',
                    },
                    // emphasis: {
                    //     focus: 'self',
                    //     shadowBlur: 10,
                    //     shadowColor: 'rgba(0,0,0,0.3)',
                    //     disabled: true,
                    // },
                    barMinHeight: 10,
                    // barWidth: 100, // 柱图宽度
                    barMaxWidth: 100,
                },
                {
                    name: '补充协议',
                    type: 'bar',
                    data: this.data.data.protocols,
                    stack: 'Ad',
                    label: {
                        show: true,
                        color: '#fff',
                        // formatter: $event => {
                        //     return $event.value;
                        // },
                    },
                    // emphasis: {
                    //     focus: 'self',
                    // },
                    barMinHeight: 10,
                    barWidth: 70, // 柱图宽度
                    // barMaxWidth: 80,
                },
                {
                    name: '总量',
                    type: 'scatter',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            distance: -2,
                            formatter: '{c}',
                            color: '#333',
                        },
                        // textStyle: {
                        //     fontWeight: 700,
                        //     color: '#333',
                        // },
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0)',
                        },
                    },
                    data: this.data.data.totals,
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        // 点击事件
        this.chartInstance.on('click', param => {
            console.log(param, 'param');
            const seriesName = param.seriesName;
            const params = {
                contractType: seriesName == '新增合同' ? '1' : '2',
                xValue: param.name,
            };
            this.$emit('click-bar', { params });
        });
    }

    updateChart(e) {
        const dataOption = {
            grid: {
                left: (() => {
                    // debugger;
                    const data = e.data.total || [];
                    if (data.length < 1) {
                        return '30px';
                    }
                    const value = String(Math.max(...data)).length * 13;
                    console.log(e.data, value, 'grid-left');
                    return value > 30 ? value + 'px' : '30px';
                })(),
            },
            xAxis: {
                data: e.xData,
            },
            series: [
                {
                    data: e.data.products.map(key => (key > 0 ? key : null)),
                },
                {
                    data: e.data.protocols.map(key => (key > 0 ? key : null)),
                },
                {
                    data: e.data.totals.map(key => (key > 0 ? key : null)),
                },
            ],
        };
        this.chartInstance.setOption(dataOption);
    }
}
</script>

<style scoped lang="scss">
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    // height: calc(100% - 40px);
    height: 100%;
    overflow: hidden;
}
.btn {
    color: #333;
}

.chart-part {
    // flex: 1;
    display: flex;
    justify-content: space-between;
    .operate {
        margin-right: 20px;
    }
}
</style>
